<script lang="ts" setup name="Login">

import { reqCanRegister } from "@/api/user";
import { onMounted, reactive, ref } from "vue";
import { useUserStore } from "@/stores/user";
import User from "@/class/User";
import { useRouter } from "vue-router";
import { RouterName } from "@/router";

let form = reactive<User>(new User({
    username: '',
    password: ''
}))
let msg = ref('');
let can_register = ref(false)
let userStore = useUserStore()
let router = useRouter()
const login=()=> {
    userStore.userLogin(form).then(loginResult => {
        if (loginResult.state === 200) {
            //获取到用户信息
            const nextRouter = localStorage.getItem("nextRoute")
            if (nextRouter != null && nextRouter != "Login" && nextRouter != "Register") {
                localStorage.removeItem("nextRoute")
                router.push({
                    name: nextRouter
                })
            } else {
                router.push({
                    path:"/"
                })
            }
        }else{
           msg.value = loginResult.msg
        }
    })
}

onMounted(() => {
    reqCanRegister().then(result => {
        can_register.value = result.data
    })
})

</script>
<template>
    <div class="my-body">
        <div class="container">
            <el-form :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input auto-complete="on" prefix-icon="el-icon-user" v-model="form.username"
                        placeholder="请输入账户"></el-input>
                </el-form-item>
                <el-form-item label="密  码">
                    <el-input auto-complete="on" show-password prefix-icon="el-icon-unlock" v-model="form.password"
                        @keydown.enter.native="login" placeholder="请输入密码"></el-input>
                </el-form-item>
                <span style="color: red">{{ msg }}</span>
                <div>
                    <el-button class="button register" v-if="can_register"
                        @click="router.push({name:RouterName.Register})">注册</el-button>
                </div>
                <div>
                    <el-button class="button login" @click="login">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.my-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url("/src/static/login-back.jpeg");
    /* 使用占位图片作为背景 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.el-form {
    margin-top: 20px;
}

.el-form-item {
    margin-bottom: 15px;
}

.el-input {
    width: 100%;
}

.el-button {
    width: 100%;
    margin-top: 10px;
    margin-left: 0px;
}

.button.register {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
}

.button.register:hover {
    background-color: #f4f4f9;
}

.button.login {
    background-color: #409eff;
    border: none;
    color: #fff;
}

.button.login:hover {
    background-color: #66b1ff;
}

span[style*="color: red"] {
    display: block;
    margin-bottom: 10px;
}
</style>